<template>
  <div class="hello">
    <div class="project_content">
      <el-card
          class="project_article_box card"
          v-for="item in project_article_Data"
          :key="item.id"
          style="line-height: 40px"
      >
        <div
            @click="to_article_content(item.id)"
        >
          <div class="project_article_title">
            <div href="javascript:">{{ item.title }}</div>
          </div>
          <p class="project_article_intro" v-html="item.intro" ></p>

        </div>
          <p class="article_list_items">
            <el-button @click="delete_method(item)" type="danger" circle icon="el-icon-delete" class="article_list_item"></el-button>
            <span class="article_list_item">{{ item.createtime }}</span>
          </p>
      </el-card>
    </div>
  </div>
</template>

<script>
import {successMessage} from "@/utils/message";

export default {
  name: "ArticleCard",
  computed: {
  },
  props: {
    project_article_Data: Array,  //注册父组件中导入的数据
    ArticleList_props_Data: Object,
  },
  methods: {
    to_article_content(id){
      this.$router.push({
        path:'/article/edit',
        query:{
          id:id
        }
      })
    },
    delete_method(item){
      item.deleteArticle().then(result=>{
        if(result){
          this.$store.dispatch("getArticleByPage")
          successMessage("删除成功")
        }
      })
    }
  },
  mounted() {
  }
}
</script>

<style scoped>
img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;

}
.hello{
  overflow: visible;
}
.card{
  margin: 10px;
}
.article_list_items{
  float: right;
  color: #8c939d;
  margin: 0;
}
.article_list_item{
  padding: 5px;
}
.project_article_title{
  color: #5f99c7;
  font-weight: bold;
  margin: 0;
}
.project_article_intro{
  margin: 0;
}
</style>